<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%  

 
%>
<head>
  <title>酒店管理系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css">
  <style>
    body {
      margin: 0px;
    }

    /* 所有 */
    #app {
      width: 100%;
      height: 100%;
    }

  .header{
    font-size: 40px;
    width: 100%;
    border-bottom: 2px solid rgba(0,0,0,0.8);
  } 
  .container{
    margin-top: 20px;
  }
  .aside{
    border-right:2px solid rgba(0,0,0,0.8);
    min-height:700px;
  }
  .userform{
    font-size: 20px;
    padding: 10px;
  }
     
  </style>
</head>

<body>
  <div id="app">
    <el-container  >
      <el-header>
       <div class="header"> Welcom to Hotel.com <span style="float: right;cursor: pointer;" @click="logout">退出 </span> </div>  
      </el-header>
      <el-container class="container">
        <el-aside class="aside" width="400px">
          <div style="text-align: center;">
            <i class="el-icon-user" style="font-size: 50px;"></i>
          </div>
          <div class="userform">ID：{{userbase.id}}</div>
          <div class="userform">账户：{{userbase.name}}</div>
          <div class="userform">電話：{{userbase.phone}}</div>
          <div class="userform">地址：{{userbase.address}}</div>
          <div class="userform">Email：{{userbase.info}}</div>
          <div class="userform">创建日期：{{userbase.createtime}}</div>

          <div class="userform">余额：{{userbase.incomes}}</div>
          <div class="userform">类型：{{userbase.type == "3" ? "一星用户":"其它"}}</div>

        </el-aside>
        <el-main>
          <div style="font-size: 40px;"> 开始入住 <i  class="el-icon-arrow-right" style="font-size: 40px;"> </i></div>
          <div style="padding: 20px;" >
            <el-form label-position="top" label-width="80px" :model="formLabelAlign">
              <el-form-item label="名称">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="活动区域">
                <el-input v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="活动形式">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
            </el-form>

          </div>
        </el-main>  
      </el-container>
      <el-footer class="footer">
        Copyright All Right Reserved @YaoJun Zhou
      </el-footer>
    </el-container>

  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script type="text/javascript" src="lib/elementui/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
      userbase : {},
      formLabelAlign: {
        name:"",
        region:"",
        type:""
      }
      },
      mounted() {
        this.setbase();
        this.getavlhouse();
      },
      methods: {
        logout() {
          axios.post("/logout").then(res=>{
            window.location.href = "/login.jsp"
          })
        },
        setbase(){
          var jsonobj = JSON.parse (localStorage.getItem("userbase"));
          this.userbase= jsonobj;
          console.log(this.userbase);
        },
        getavlhouse () {
          axios.post("/getAvalHouse").then(res=>{
            
          })
        }
      }
    });
  </script>

</body>

</html>